<template>
	<!-- 对比评吸 -->
	<view class="com_view">
		<view class="icon_box" @click="showHelp">
			<image src="@/static/icons/help.png" mode=""></image>
		</view>
		<scroll-view scroll-x="true" scroll-y="true" class="scroll_box">
			<view class="scroll_content">
				<!-- 表头 -->
				<view class="table_header">
					<view class="header_cell" v-for="header in Headers" :key="header.key"
					 :class="header.class+' '+header.bg">
						<text>{{ header.name }}</text>
						<view class="header_options" v-if="header.options&&header.options.length > 0">
							<view class="header_option" v-for="item in header.options" :key="item.value">
								<text>{{ item.label }}</text>
								<text>{{ item.value }}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 表格内容 -->
				
				<view class="table_content">
					<view v-for="(row,index) in tableData" :key="row.id">
						<view class="table_row" >
							<view class="table_cell" v-for="header in Headers" :key="header.key" 
							:class="[`${header.class} `, `${header.type!='text'&&isSubmit&&!row.meetingContrastCorrelationRep[header.key]? 'no_fill':''}`]">
								<!--class="custom-header-line-1" @click="$showFill(row[header.key], header.isHeader)" -->
								
								<!-- 固定文本 -->
								<view  v-if="header.type === 'text'">
									<text>{{ row[header.key] }}</text>
								</view>
								
								<!-- 总计 -->
								<text v-else-if="header.type==='total'"> {{ $ReserveOne(row.meetingContrastCorrelationRep[header.key]) }} </text>
								
								<!-- 已经提交过 -->
								<text v-else-if="row.meetingContrastCorrelationRep.status=='1'||row.disabled">
									{{ $ReserveOne(row.meetingContrastCorrelationRep[header.key]) }}
								</text>
								
								<!-- 正常输入框: 填写状态和展示状态 -->
								<view class="input_cell" v-else @click="inputCellEv(row, header)">
									
									<text v-if="(row.id+header.key)!==clickId" class="text-show" @click.stop="">
										{{ $ReserveOne(row.meetingContrastCorrelationRep[header.key]) }}
									</text>
									<u-input border="surround" inputAlign="center" fontSize="16px"
									 type="number" @blur="inputBlur(row, header, $event)" 
									v-model="row.meetingContrastCorrelationRep[header.key]" ></u-input>
								</view>
								
								
								
							</view> 
						</view>
						<view class="table_add" v-if="(index + 1) % 2 === 0">
							<view class="add_title">
								<text>评价结果和文字描述</text>
							</view>
							<view class="add_value">
								<u-input border="surround"  fontSize="16px" style="width: 100%;"
								@blur="addLineBlur(row)" placeholder="请输入描述..."
								 :disabled="row.meetingContrastCorrelationRep.status=='1'||row.disabled" 
								v-model="row.meetingContrastCorrelationRep.evaluateResults" ></u-input>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</scroll-view>
		<!-- owCancelButton="true" cancelText="暂不提示" @cancel="tipCancel" -->
		
		<u-modal :show="tipShow" title="提示" :content='tipText'
		width="300px" 
		@confirm="tipClose" @close="tipClose"></u-modal>
		
		<view class="submit-line">
			<u-button :text="already? '已提交':'提交'" type="success" class="btn" 
			@click="submit" :disabled="already"></u-button>
		</view>
		
		<u-modal :show="helpShow" title="对比评吸" 
		width="400px" 
		@confirm="helpShow=false" @close="helpShow=false">
			<view class="help_box">
				<view class="help_line">
					1、<text>以下数据除评价结果外均为必填项，且步长为0.1。</text>
				</view>
				<view class="help_line">
					2、<text>光泽的取值范围为0~5。</text>
				</view>
				<view class="help_line">
					3、<text>香气的取值范围为0~32。</text>
				</view>
				<view class="help_line">
					4、<text>谐调的取值范围为0~6。</text>
				</view>
				<view class="help_line">
					5、<text>杂气的取值范围为0~12。</text>
				</view>
				<view class="help_line">
					6、<text>刺激性的取值范围为0~20。</text>
				</view>
				<view class="help_line">
					7、<text>余味的取值范围为0~25。</text>
				</view>
			</view>
		</u-modal>
		
		<u-modal :show="submitShow" title="提交确认" width="300px"
		 content="数据提交后将无法进行修改，您确定要提交吗？"
		:showCancelButton="true" @cancel="submitShow=false" @confirm="submitConfirm" @close="submitClose"
		></u-modal>
		
	</view>
</template>

<script>
	import {
		getMMC
	} from "@/api/correlation.js"
	import {
		getMmeetingContrast,
		meetingContrastCorrelation
	} from "@/api/tPoint.js"
	import request from '@/utils/request.js'
	
	/** 表格数据 */
	const tableHeader = [
		{
			name:'样品编号',
			key:'number',
			type: 'text',
			// isHeader: true,
			class: 'no_class',
			bg: 'no_bg'
		},{
			name:'牌别',
			key:'allowanceName',
			type: 'text',
			// isHeader: true,
			class: 'name_class',
			bg: 'name_bg'
		},{
			name:'光泽',
			key:'smokeGloss',
			len: 0.1,
			area: [0, 5],
			options:[ { label: 'Ⅰ', value: '5' },{ label: 'Ⅱ', value: '4' },{ label: 'Ⅲ', value: '3' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'香气',
			key:'smokeAroma',
			len: 0.1,
			area: [0, 32],
			options:[ { label: 'Ⅰ', value: '32' },{ label: 'Ⅱ', value: '28' },{ label: 'Ⅲ', value: '24' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'谐调',
			key:'smokeHarmony',
			len: 0.1,
			area: [0, 6],
			options:[ { label: 'Ⅰ', value: '6' },{ label: 'Ⅱ', value: '5' },{ label: 'Ⅲ', value: '4' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'杂气',
			key:'smokeImpure',
			len: 0.1,
			area: [0, 12],
			options:[ { label: 'Ⅰ', value: '12' },{ label: 'Ⅱ', value: '10' },{ label: 'Ⅲ', value: '8' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'刺激性',
			key:'smokeThrill',
			len: 0.1,
			area: [0, 20],
			options:[ { label: 'Ⅰ', value: '20' },{ label: 'Ⅱ', value: '17' },{ label: 'Ⅲ', value: '15' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'余味',
			key:'smokeAftertaste',
			len: 0.1,
			area: [0, 25],
			options:[ { label: 'Ⅰ', value: '25' },{ label: 'Ⅱ', value: '22' },{ label: 'Ⅲ', value: '20' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'总计',
			key:'smokeTotal',
			isrequest: true,
			type: 'total',
			class: 'total_class'
		},
	]
	
	/** 提示使用的字典项 */
	const tipDict = {
		"smokeGloss": "光泽",
		"smokeAroma": "香气",
		"smokeHarmony": "谐调",
		"smokeImpure": "杂气",
		"smokeThrill": "刺激性",
		"smokeAftertaste": "余味",
	}
	
	export default {
		name: 'contrastCom',
		props: {
			id: {
				type: [Number, String],
				default: 0
			},
			already: { // 是否提交过
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 表格数据
				tableData: [],
				tipShow: false, //填写规则不符合的提示
				tipText: "", // 提示内容
				helpShow: false, //帮助的提示
				tipShowArr:{
					smokeGloss: true,
					smokeAroma: true,
					smokeHarmony: true,
					smokeImpure: true,
					smokeThrill: true,
					smokeAftertaste: true,
				},
				tipKey: "", //显示的关键词
				isSubmit: false, // 是否点击过提交按钮
				submitShow: false, //点击提交的提示
				timer2: null, //定时查询后台的数据
				live: true, //表明页面还存活着
				clickId: "", //当前点击的行id+key
			}
		},
		computed:{
			Headers() { return tableHeader }, // 表头列表
		},
		watch:{
			already(nv, ov) {
				if(nv) {
					if(this.timer2) {
						clearTimeout(this.timer2)
					}
					this.repeatGetData()
				}
			}
		},
		mounted() {
			if(this.already) {
				if(this.timer2) {
					clearTimeout(this.timer2)
				}
				this.repeatGetData()
			} else {
				this.getData()
			}
		},
		beforeDestroy() {
			if(this.timer2) {
				clearTimeout(this.timer2)
			}
		},
		methods: {
			
			// 重复获取数据
			async repeatGetData() {
				this.timer2 = setTimeout(()=>{
					this.repeatGetData()
				}, 1000 * 5)
				const res = await getMmeetingContrast({allId: this.id, loading: false})
				if(res.code != 200) { return }
				this.tableData = res.data
			},
			
			// 提示帮助
			showHelp() {
				this.helpShow = true
			},
			
			async getData() {
				const res = await getMmeetingContrast({allId: this.id})
				console.log("获取到的对比评吸数据", res)
				if(res.code != 200) { return }
				this.tableData = res.data
			},
			// 设置点击位置
			inputCellEv(row, header) {
				if( this.already ) return ;
				this.clickId = row.id+header.key
			},
			
			inputBlur(row, header, e) {
				
				// 重置点击位置
				this.clickId = ""
				
				let form = row.meetingContrastCorrelationRep
				let len = (header.len||0.1) * 10
				let key = header.key
				let area = header.area||[0,100]
				form[key] = e
				let loop = this.checkValue(form, key, len, area )
				if(!loop) {
					form[key] = null
					return
				};
				
				this.submitCell(form, key)
			},
			// 校验数据
			checkValue(form, key, len, area) {
				this.tipKey = key
				let min = area[0]
				let max = area[1]
				let value = (form[key]||0)* 1
				if(!value) {
					this.tipText = `${tipDict[key]}取值区间为${min} ~ ${max}`
					// this.tipShow = this.tipShowArr[key]
					this.tipShow = true
					return false
				}
				let remain = value * 10 % len
				if(remain !== 0||value < min || value > max) {
					form[key] = null
					this.submitCell(form, key)
					// tipText 步长为0.5，请填写整数或小数部分为0.5
					if(value <= min || value > max) {
						this.tipText = `${tipDict[key]}取值区间为${min} ~ ${max}`
					} else {
						const a = (len/10).toFixed(1)
						this.tipText = `${tipDict[key]}的步长为${a}, 请填写整数或小数部分为${a}或${a}的整数倍`
					}
					// this.tipShow = this.tipShowArr[key]
					this.tipShow = true
					return false
				}
				return true
			},
			
			// 更改单行数据
			async submitCell(form, key) {
				form.smokeTotal = this.getSmokeTotal(form)
				const res = await meetingContrastCorrelation({loading: false, ...form})
				if(res.code != 200) {
					form.smokeTotal = form.smokeTotal - form[key]*1
					form[key] = null
				}
			},
			// 每两行数据后的一行数据
			async addLineBlur(row) {
				let form = row.meetingContrastCorrelationRep
				const res = await meetingContrastCorrelation({loading: false, ...form})
			},
			
			/**返回总值*/
			getSmokeTotal(form) {
				let keys = Object.keys(tipDict)
				let total = 0
				keys.forEach(key=>{
					let value = (form[key]||0)*1
					total += value
				})
				return total.toFixed(1)
			},
			
			tipClose() {
				this.tipShow = false
			},
			
			tipCancel() {
				this.tipShowArr[this.tipKey] = false
				this.tipShow = false
			},

			submitClose() {
				this.submitShow = false
			},
			
			async submitConfirm() {
				this.$emit('c_submit', '对比评吸');
				// this.$emit('update:Index', 1);
							
				const res = await request.put('/ipad/meetingContrastCorrelation/submit/' + this.id, {
					allId: this.id
				})
							
				this.getData()
				this.submitShow = false
			},
			
			async submit() {
			
				// 查询填写是否完整
				let isFull = true
				this.isSubmit = true
				this.tableData.forEach(item => {
					const e = item.meetingContrastCorrelationRep
					if (!e.smokeAftertaste || !e.smokeAroma || !e.smokeGloss || !e.smokeHarmony || !e
						.smokeImpure || !e.smokeThrill) {
						isFull = false
					}
				})
			
				// 校验每第二行数据的评价内容是否填写
				for(let i = 1; i< this.tableData.length ; i=i+2) {
					let cell = this.tableData[i]
					if(!(cell.meetingContrastCorrelationRep||{}).evaluateResults) {

						if(!this.tableData[i].meetingContrastCorrelationRep) {
							this.tableData[i].meetingContrastCorrelationRep = {}
						}
						this.tableData[i].meetingContrastCorrelationRep.evaluateResults = "——"
					}
					
				}
				
				if (!isFull) {
					uni.showToast({
						title: '请检查您的输入是否完整',
						icon: 'none',
						mask: true
					})
							
					return false
				}
				
				this.submitShow = true
			
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.com_view {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// flex: 1;
		height: 500px;
		padding: 20px;
		padding-top: 0;
		--def-cell-width: 130px;
		--def-table-bg: rgb(245, 247, 250);
		position: relative;
	}
	.icon_box {
		position: absolute;
		top: 0px;
		right: 0px;
		z-index: 9;
		transform: translate(-70%, -120%);
		image {
			--hlep-icon-size: 26px;
			width: var(--hlep-icon-size);
			height: var(--hlep-icon-size);
		}
	}
	.help_box {
		.help_line {
			display: flex;
			line-height: 24px;
		}
	}
	.submit-line {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
		.btn {
			width: 100px;
			background-color: #16b777;
		}
	}
	.scroll_box {
		width: 100%;
		// height: 100%;
		height: calc(100% - 70px);
		.scroll_content {
			min-width: 100%;
			min-height: 100%;
			position: relative;
			width: max-content;
			background-color: var(--def-table-bg);
			.no_class {
				width: 90px;
				position: sticky;
				z-index: 4;
				left: 1px;
				background-color: var(--def-table-bg);
			}
			.name_class {
				width: 240px;
				position: sticky;
				z-index: 4;
				left: 90px;
				background-color: var(--def-table-bg);
			}
			.no_bg {
				background-image: url(@/static/Maskgroup.png);
			}
			.name_bg {
				background-image: url(@/static/Maskgroup.png);
				background-position: -30px 0px;
			}
			.no_fill {
				background-color: rgba(200, 16, 46, 0.5);
			}
			.total_class {
				width: 100px;
			}
		}
	}
	.table_header {
		width: max-content;
		min-width: 100%;
		background-image: url(@/static/Maskgroup.png);
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ddd;
		border-left: 1px solid #ddd;
		position: sticky;
		top: 0;
		z-index: 7;
		.header_cell {
			// min-width: 100px;
			// flex: 1;
			height: 100px;
			padding: 10px 0;
			width: var(--def-cell-width);
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-right: 1px solid #ddd;
		}
		.header_options {
			width: 100%;
			margin-top: 10px;
			padding: 0 10px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.header_option {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				font-weight: bold;
				color: #999;
			}
		}
	}
	.table_content {
		width: max-content;
		min-width: 100%;
		background-color: rgb(245, 247, 250);
		.table_row {
			width: max-content;
			min-width: 100%;
			display: flex;
			align-items: center;
			border-left: 1px solid #ddd;
			border-bottom: 1px solid #ddd;
			
		}
		.table_cell {
			// flex: 1;
			// min-width: 100px;
			width: var(--def-cell-width);
			height: 50px;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 1px solid #ddd;
			position: relative;
			.input_cell {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.text-show {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 2;
					background-color: var(--def-table-bg);
					// pointer-events
					// pointer-events: all;
					
				}
			}
		}
	}

	.table_add {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ddd;
		border-left: 1px solid #ddd;
		.add_title {
			position: sticky;
			left: 0;
			z-index: 4;
			width: calc(240px + 90px);
			background-color: var(--def-table-bg);
			border-right: 1px solid #ddd;
			border-bottom: 1px solid #ddd;
			border-top: 1px solid #ddd;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.add_value {
			flex: 1;
			height: 50px;
			display: flex;
			align-items: center;
			padding-left: 20px;
		}
	}
	
</style>